<script setup>
import { ref, onMounted } from 'vue';
import { reqDormitoryNoteDetail } from '@/api/teacher/record/stay';
import { useRoute } from 'vue-router';
import { showFailToast } from 'vant';
import { stateNumber } from '@/utils/getStateNumber.js';

const route = useRoute();

const isLoading = ref(true);

const getStayNoteDetail = async () => {
    try {
        const result = await reqDormitoryNoteDetail(route.query.id);

        if (result.status == 200) {
            stayNote.value = result.data;

            const obj = result.data.beforeApprover;

            if (obj[2]) {
                const valueAndKey = Object.entries(obj[2])[0];
                firstApprover = `${valueAndKey[0]}(${valueAndKey[1]})`;
            }
            if (obj[6]) {
                const valueAndKey = Object.entries(obj[6])[0];
                firstApprover = `${valueAndKey[0]}(${valueAndKey[1]})`;
            }
            if (obj[13]) {
                const valueAndKey = Object.entries(obj[13])[0];
                secondApprover = `${valueAndKey[0]}(${valueAndKey[1]})`;
            }
            if (obj[19]) {
                const valueAndKey = Object.entries(obj[19])[0];
                thirdApprover = `${valueAndKey[0]}(${valueAndKey[1]})`;
            }
        } else {
            throw new Error(result.statusText || '获取留宿申请信息失败');
        }
    } catch (e) {
        showFailToast(e.message);
    }
    isLoading.value = false;
};

let firstApprover = '';
let secondApprover = '';
let thirdApprover = '';

const stayNote = ref({});

onMounted(() => {
    getStayNoteDetail();
});
const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
</script>

<template>
    <div class="container" v-loading="isLoading">
        <h2 class="heading">{{ stayNote.studentName }}的请假条</h2>
        <el-descriptions :column="1" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假状态"
            >
                {{ stateNumber(stayNote.state) }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="姓名"
            >
                {{ stayNote.studentName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="学号"
            >
                {{ stayNote.studentNumber }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="班级"
            >
                {{ stayNote.className }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假类型"
            >
                留宿申请
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="宿舍"
            >
                {{ stayNote.buildingName }} - {{ stayNote.floorName }}楼 -
                {{ stayNote.dormNum }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="留宿开始时间"
            >
                {{ stayNote.startTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="留宿结束时间"
            >
                {{ stayNote.endTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="请假理由"
            >
                {{ stayNote.reason }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审批人"
                v-if="firstApprover"
            >
                {{ firstApprover }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="第二审批人"
                v-if="secondApprover"
            >
                {{ secondApprover }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="最终审批人"
                v-if="thirdApprover"
            >
                {{ thirdApprover }}
            </el-descriptions-item>
        </el-descriptions>

        <img
            class="pass-img"
            v-show="
                stayNote.state == 4 ||
                stayNote.state == 31 ||
                stayNote.state == 33
            "
            :src="`${PUBLIC_URL}/common-pass.png`"
            alt="图片"
        />
    </div>
</template>

<style scoped lang="scss">
.container {
    padding: 20rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 22rem;
    text-align: center;
    margin-bottom: 20rem;
    font-weight: bold;
}

:deep(.content) {
    font-size: 18rem !important;
}

.pass-img {
    position: absolute;
    width: 140rem;
    right: 30rem;
    top: 100rem;
}
</style>
